<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">创建课程</el-button>
        <el-dialog v-model="dialogVisible" title="创建课程" width="35%">
            <el-form :model="newCourseInfo" label-width="120px">
                <el-form-item label="课程名">
                    <el-input type="text" v-model="newCourseInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="课程介绍">
                    <el-input type="text" v-model="newCourseInfo.description"></el-input>
                </el-form-item>
                <el-form-item label="链名称">
                    <el-radio-group v-model="newCourseInfo.chainName">
                        <el-radio label="dwbc001">dwbc001</el-radio>
                        <el-radio label="dwbc002">dwbc002</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="链账户">
                    <el-input type="text" v-model="newCourseInfo.chainAccount"></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker type="datetime" v-model="newCourseInfo.start"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker type="datetime" v-model="newCourseInfo.end"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createCourse">创建</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <div style="width: 1200px; margin-top: 20px;">
        <el-table :data="list">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="课程名" prop="name" width="150"></el-table-column>
            <el-table-column label="课程介绍" prop="description" width="300"></el-table-column>
            <el-table-column label="链名" prop="chainName" width="100"></el-table-column>
            <el-table-column label="开始时间" prop="start" width="180"></el-table-column>
            <el-table-column label="结束时间" prop="end" width="180"></el-table-column>
            <el-table-column>
                <template #header>
                    <div></div>
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="removeCourse(scope.$index)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import cookie from 'js-cookie'

import { newCourse, getMyCourses, deleteCourse } from '@/http/api/course'

export default {
    name: 'CourseManagement',
    data() {
        return {
            username: '',
            dialogVisible: false,
            newCourseInfo: {
                name: '',
                description: '',
                chainName: '',
                chainAccount: '',
                start: '',
                end: ''
            },
            list: []
        }
    },
    methods: {
        async createCourse() {
            let res = await newCourse({
                name: this.newCourseInfo.name,
                description: this.newCourseInfo.description,
                chainName: this.newCourseInfo.chainName,
                username: this.username,
                chainAccount: this.newCourseInfo.chainAccount,
                start: new Date(this.newCourseInfo.start).getTime() / 1000,
                end: new Date(this.newCourseInfo.end).getTime() / 1000
            })
            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }
            this.$message.success("创建成功")

            this.newCourseInfo.name = ''
            this.newCourseInfo.description = ''
            this.newCourseInfo.chainName = ''
            this.newCourseInfo.chainAccount = ''
            this.newCourseInfo.start = ''
            this.newCourseInfo.end = ''

            this.getList()
        },
        async removeCourse(index) {
            let res = await deleteCourse({
                id: this.list[index].id
            })
            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }
            this.$message.success('移除成功')
            this.getList()
        },
        async getList() {
            let res = await getMyCourses({
                username: this.username
            })

            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }

            this.list = res.data
        }
    },
    mounted() {
        this.username = cookie.get('username')
        this.getList()
    }
}
</script>